Vuelta arriba y vuelta abajo la repasamos una y otra vez, y el código en cuestión pasa por delante de nuestras narices y nosotros sin verlo ¿no te ha pasado?
En el blog de Rosa he encontrado este truco creo que es uno de los más sencillos y más útiles que he visto. Como me gusta probarlo todo antes de hacerlo llegar ahí va mi ejemplo y mi captura.
Para usuarios de Firefox:
Supongamos que vamos a buscar <div id='sidebar-wrapper'> nos situaremos en nuestra plantilla en Edición HTML y marcaremos para "Expandir la plantilla de artilugios"
En nuestro teclado pulsaremos las teclas Ctrl y F al mismo tiempo, justo sobre la barra de INICIO veremos un buscador, pegaremos ahí la parte de código a buscar y al instante nos ubica el código marcado en color verde.
Para usuarios de Explorer el procedimiento es el mismo, la única diferencia es que muestra la ventana del buscador en el centro y el código a buscar aparece marcado en color azul.
Reflectionmaker ( Generador de reflejos en las imágenes) |
|
▼ |
Todos aprovechamos el fin de semana para actualizar y hacer cambios en nuestro blog los 31 correos que he recibido así me lo confirman, es lógico puesto que son días de descanso laboral.
Si he de ser sincera es un alago y asusta al mismo tiempo. Contestaré a todos por orden de llegada al igual que los comentarios, mientras tanto dejo el enlace a una página que me ha gustado y espero que a vosotros también, o al menos sepáis de su existencia por si en algún momento gustáis de añadir un efecto diferente a las imágenes.
Se trata de Reflectionmaker con unos breves pasos conseguiremos añadir a cualquier imagen un efecto reflejo, sin descargar nada ni añadir código alguno, únicamente añadiendo la url de la imagen o directamente desde nuestro PC.
Fuente: Xiberneticos
Eliminar borde punteado en los enlaces |
|
▼ |
Ya me había acostumbrado a ver ese recuadro espantoso en cualquier imagen que hace de enlace:
Gracias a Cosas sencillas perderé de vista ese feo enmarcado de forma tan simple como agregar antes de </b:skin> lo siguiente:
outline:none;
}
SLIDE.COM ( Slideshow con música y efectos) |
|
▼ |
Si, ya sé... ya sé que sobre Slideshow está todo visto y algunos sois muy reacios a añadirlos en vuestro blog, pero también hay una mayoría que les gusta.
SLIDE.COM nos ayuda a confeccionar10 modelos diferentes a los que podemos añadir música y efectos (yo prescindí de ellos para los ejemplos)
Blogcrowds (Plantillas dos, tres columnas) |
|
▼ |
Recuerdo haber pasado horas y horas buscando plantillas a tres columnas, la Rounders en concreto.
Gracias a Blogcrowds cambiar la plantilla de dos a tres columnas es tan sencillo como copiar y pegar. Si no estamos descontentos con nuestra plantilla actual de dos columnas pero si con el diseño pues también las tiene a dos columnas.
Espero que esta entrada conteste tu pregunta Paqui.
ACTUALIZADO |
Al aplicar estas plantillas la función que Blogger pone a nuestra disposición para añadir fuentes y colores no está activa.
CSS MENU MAKER (Generador de menús) |
|
▼ |
He recibido varias peticiones sobre menús horizontales, ya hablamos sobre el clásico menú horizontal y sobre el menú desplegable
Esta vez es algo diferente, un generador de menús, la forma de crearlo es muy sencilla para ello accederemos a CSS MENU MAKER encontraremos a la izquierda menús horizontales y a la derecha verticales.
Escogemos el que mejor se adapte nuestro blog.
Agregamos el número de temas que harán de enlace para en el menú y clicamos en Submit
Llenamos los campos requeridos para el título y agregamos a la derecha la url del lugar que vamos a enlazar. Clicamos de nuevo en Submit
CSS Code y nos situaremos en plantilla Edición html
Justo antes de ]]></b:skin> lo pegaremos.
Luego copiaremos donde dice HTML Code nos situaremos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
</ul>
Abriremos la carpeta "images" y extraeremos las imágenes en formato gif. que más tarde alojaremos en un servidor para conseguir la url de las imágenes.
Esa url la debemos pegar en el código que agregamos a la CSS de nuestra plantilla.
Viene detallado donde agregarla, deberéis buscar donde dice algo así como: background:transparent url("images/nombre-de-la-imagen.gif") .......
Gracias JmpaSrgc por el detalle, hacía tiempo que un generador no me hacia tanta ilusión.
Enrollamiento en imágenes mediante un script |
|
▼ |
Hace poco redondeábamos las esquinas de una imagen añadiendo un script de la librería Glossy.js
Lo de hoy se trata de añadir un efecto enrollamiento. Para hacerlo descargaremos la librería Curl.js
El archivo descargado es en formato zip deberemos extraer Curl.js y alojarlo en nuestro servidor.
Luego nos dirigimos a Plantilla/Edición HTML donde añadiremos justo antes </head>de lo siguiente:
<script type="text/javascript" src="aquí-url-de-tu-archivo-curl.js"></script>
Guardamos los cambios y cada vez que deseemos crear el efecto enrollamiento agregaremos:
<img class="curl" src="url-de-tu-imagen.jpg"/>
Resultado:
Podemos variar el efecto con los siguientes parámetros:
isize:Nos permite variar el tamaño del efecto, en caso de querer hacerlo agregamos el parámetro isize seguido por el tamaño deseado.
icolor:Conseguimos cambiar el color del enrollamiento que acompaña a la imagen. Lo haremos agregando icolor seguido del color expresado en hexadecimal: mínimo=000000 máximo=ffffff.
También podemos combinar todos los parámetros de esta forma:
Curl.js funciona con todos los navegadores mientras que en IE no se apreciará ningún efecto.
Fuente: Xyberneticos
Plantilla blogy-illacrimo |
|
▼ |
Pintar, esculpir, decorar, componer, pienso que de una forma u otra todo es arte. Diseñar es una forma más de transmitir ideas y ejecutarlas ¿no es arte? puede que no se tenga como tal, pero si el diseño de espacios lo denominamos arte ¿por qué no lo es diseñar plantillas Web?
La plantilla blogy-illacrimo no voy a decir que sea una obra de arte porque podéis pensar que exagero, pero si digo que es una maravilla me quedo corta.
Francisco de Blog and Web ha adaptado para Blogger esta plantilla de DesignDisease bajo licencia Creative Commons.
En su blog la podéis descargar y encontrar toda la información necesaria.
Características de la plantilla blogy-illacrimo.
- Definición de colores en el panel.
- Tres columnas.
- Estilo en comentarios.
- Estilo en fecha.
- Buscador interno.
- Menú personalizable.
1.500 iconos listos para descargar. |
|
▼ |
Lo he visto en Xyberneticos y son geniales, 1.500 iconos de crystal listos para descargar en un pack, los encontraremos en formato PNG y en tamaño 16×16,22×22, 24×24, 32×32, 48×48, 64×64 y 128×128.
Hay tres formas de descargar el pack, Xyberneticos nos recomienda Crystal Project icons el archivo se encuentra comprimido en tar.gz, pero con winrar podemos descomprimirlo sin problemas.
Menú horizontal desplegable |
|
▼ |
Antes de nada quiero aclarar que este menú no sustituye las categorías de Blogger, su finalidad es crear enlaces de forma dinámica a modo de desplegable.
1º- Copiamos y pegamos el siguiente código justo después de <head>
<link href='http://ar.geocities.com/blogdecesar/css.css' rel='stylesheet'/>
<!--[if IE]>
<link rel="stylesheet" href="http://ar.geocities.com/blogdecesar/hack.css" />
<script type="text/javascript">
window.mlrunShim = true;
</script>
<![endif]-->
<script src='http://ar.geocities.com/blogdecesar/js.js' type='text/javascript'>
</script>
Los archivos son gentileza de César, podemos utilizarlos para añadir el menú y averiguar si funciona en nuestro blog pero recomiendo alojar los archivos en nuestro propio servidor para asegurar el buen funcionamiento.
Archivo CSS
Archivo js.
Archivo hack.css
2º- Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul></li>
</ul>
</div>
</center>
La forma de modificarlo es muy sencilla:
Título o tema será el tema para la categoría de enlaces.
url: debemos pegar la url del lugar que deseamos enlazar.
En Link1, Link2, Link3, y Link4 irá el texto asignado al correspondiente enlace.
Este Menú es una gentileza de César que amablemente pone a disposición de todos.
Yo me he permitido variar un poco las explicaciones para adecuar los colores a nuestro gusto.
El primer código que añadimos a la plantilla contiene tres archivos, un archivo js. y dos CSS.
Uno de los archivos CSS es el que podemos configurar para cambiar el aspecto referente a color.
Lo hice de la siguiente forma:
1º- En el primer paso añadí justo antes de </head> el archivo js. que previamente subí a mi servidor.
2º-Después el archivo css que contiene la configuración para modificar el aspecto del menú lo abrí con el bloc de notas y copié su contenido para seguidamente pegarlo justo antes de ]]></b:skin>
El contenido es el siguiente:
archivo cssEs ahí donde podéis modificar los colores del menú donde dice /*colors for menu*/
3º-Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir el mismo código que el primer paso:
<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul></li>
</ul>
</div>
</center>
Añadimos los enlaces y listo.
Como podéis comprobar la única diferencia es que añadimos en nuestra plantilla un archivo que siendo alojado en un servidor ocuparía mucho menos espacio pero que podremos modificar cada vez que lo deseemos sin necesidad de abrir el archivo y volverlo a alojar.
Si una vez modificado no necesitamos modificarlo más también podemos subir el archivo a nuestro servidor y en el código de César que añadimos después de <head> sustituimos:
url-de-archivo-
css
por la url de vuestro archivo css.Ver ejemplo en el blog de César.
Walabay (Biblioteca de música) |
|
▼ |
Disponemos desde 512 megas para almacenar hasta 170 canciones, también las podemos descargar a nuestro teléfono móvil sin costo alguno.
Walabay nos provee de una nube de etiquetas con nombres de cantantes para facilitar así su localización.
Suerte J. ya puedes llenar tu móvil de canciones.
GRSites (Botones) |
|
▼ |
A Noa le gustan los botones de la sidebar, y así me lo hizo saber.
No es nada difícil Noa, se trata de un generador de botones, la página es GRSites una página que a simple vista no reparas en ella pero una vez la descubres la guardas en favoritos.
En su día ya hablé sobre ella tratando el tema de fondos para blog.
Para crear los botones podéis acceder desde aquí, los podemos crear escogiendo el tamaño y añadiendo el texto deseado, con texturas, color y efecto cristal, este último es un efecto que me agrada mucho.
Si tenéis algún color o textura la podéis añadir directamente subiéndola desde nuestro PC. Los efectos van desde el sombreado y relieve pasando por un efecto flotante muy atractivo.
El modelo a gusto de cada uno, yo hice unos cuantos de prueba.
Alejandro Aura recupera su blog. |
|
▼ |
Felicitaciones Alejandro y Milagros vuestra alegría es compartida por todos.
FG-a ( botones, backgrounds,banderas en flags...) |
|
▼ |
Me ha costado trabajo decidirme por una imagen para esta entrada, y es que no veo un logo que identifique la página Fg-a Pero eso no es problema para hablar de ella.
En la sidebar de la página encontraréis backgrounds, gifs, líneas, banderas en flags, botones...
En Buttons Page Two , Buttons Page Three y FG&A Buttons más botones listos para añadir el texto desde un editor de imágenes.
Animoto (Creación de vídeos) |
|
▼ |
Animoto es una página que nos permite crear vídeos y añadirles música, podemos subir nuestras imágenes desde nuestro PC. Me ha sorprendido el proceso de carga por la rapidez, y los pasos a seguir que son muy sencillos.
Los efectos son muy originales, Animoto se encarga de aplicarlos, el número de fotografías permitidas oscila entre 12 y 15, la duración del vídeo es de 30 segundos.
Una vez creado el vídeo podemos enviarlo directamente a nuestro blog clicando en Blogger o conseguir el código en "Embed Code" para añadirlo en nuestro blog.
Gracias Jejo por la aportación.
Línea de separación en la sidebar |
|
▼ |
Quizás JmpaSrgc pueda pensar que he olvidado una pregunta que me hizo, así que vamos a rizar el rizo como él suele decir y añadir una línea que separe sidebar y main.
Para hacerlo nos situaremos en Plantilla/Edicción HTML buscaremos donde dice #sidebar-wrapper { y añadiremos: border-left: 1px solid #000000;
Quedaría algo así:
#sidebar-wrapper {
width: 220px;
float: right;
border-left: 1px solid #000000;
El valor (1px) podemos aumentarlo o disminuirlo según el grosor deseado.
Para el color bastaría cambiar (#000000) por el color escogido pero no olvidéis cerrar con (;)
Rizo rizado JmpaSrgc.